<template>
    <div>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="goodsItem" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="商品分类">
            <el-cascader style="width: 250px;" v-model="goodsItem!.classifies" 
            :options="classifyData" :props="{
                checkStrictly: true,
                label: 'name',
                value: '_id'
            }" clearable />
        </el-form-item>
        <el-form-item label="商品名称:" prop="name">
          <el-input v-model="goodsItem!.name" placeholder="请选择"/>
        </el-form-item>
        <el-form-item label="单位:" prop="type">
          <el-input v-model="goodsItem!.type" placeholder="请选择"/>
        </el-form-item>
        <el-form-item label="商品轮播图:" prop="">
          <div class="img-size">
            <el-upload
          class="avatar-uploader"
          action="http://nocat.life:3011/images/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="goodsItem!.image" :src="goodsItem!.image" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><PictureFilled /></el-icon>
        </el-upload>
          </div>
      </el-form-item>

        <el-form-item label="添加视频:" prop="delivery">
          <el-switch v-model="goodsItem!.state" />
        </el-form-item>
        <el-form-item label="商品状态:" prop="resource">
                <!-- 单选框 -->
        <el-radio-group v-model="goodsItem!.state">
          <el-radio :value="1">上架</el-radio>
          <el-radio :value="0">下架</el-radio>
        </el-radio-group>
        </el-form-item>
       
      </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { classListItem } from '@/api/modules/goodsList'
import { useFetchData } from '@/hooks/fetchData'
import { PictureFilled } from '@element-plus/icons-vue'
// import type { Picture } from 'element-plus'
// 获取公共类型数据
const { getClassifyDataAsync, classifyData } = useFetchData();
const imageUrl=ref('')
// 一件商品的详情
const goodsItem=defineModel<classListItem>()
console.log(goodsItem);

interface RuleForm {
  name: string
  type: string
  classifiesId: string[]
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
) => {
  console.log(response.data);
  console.log(goodsItem);
  
  goodsItem.value!.image= response.data
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
onMounted(()=>{
  getClassifyDataAsync()
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],

})

</script>

<style scoped lang="scss">
.img-size{
  .avatar{
    width: 150px;
    height: 150px;
  }
}
</style>